<template>
    <div class="tool-tip-wrap">
        <button id="button" ref="buttonRef" @mouseenter="onShowToolTip" @mouseleave="onHiddenToolTip">Popperjs 教程</button>
        <div id="tooltip" v-show="isVisible" ref="tooltipRef" class="tooltip">
            <slot></slot>
            <div class="arrow" id="arrow" data-popper-arrow></div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, onBeforeMount, onUnmounted } from "vue"
    import { createPopper } from "@popperjs/core"

    const buttonRef = ref(null)
    const tooltipRef = ref(null)
    const isVisible = ref(false)
    const popperInstance = ref(null)

    const props = defineProps({
        options: {
            type: String,
            required: false,
            default(rawProps) {
                return 'bottom'
            }
        }
    })

    const onShowToolTip = () => {
        isVisible.value = true
        popperInstance.value = createPopper(buttonRef.value, tooltipRef.value, {
            placement: 'bottom',
            strategy: 'absolute',
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: [0, 9],
                    },
                },
            ],
        })
        // Update its position
        popperInstance.value.update();
    }

    const onHiddenToolTip = () => {
        isVisible.value = false
        if (popperInstance.value) {
            popperInstance.value.destroy()
            popperInstance.value = null
        }
    }

    onBeforeMount(() => {
        
    })
    onMounted(() => {
        onShowToolTip()
        console.log(buttonRef, 7777);
    })
    onUnmounted(() => {

    })
</script>

<style lang="scss">
    .tool-tip-wrap {
        padding: 120px 0;
        text-align: center;
    }
    .tooltip[data-popper-placement^='bottom'] {
        .arrow {
            top: -4px;
        }
    }
    .tooltip[data-popper-placement^='top'] {
        .arrow {
            bottom: -4px;
        }
    }
    .tooltip[data-popper-placement^='left'] {
        .arrow {
            right: 0px;
        }
    } 

    .tooltip[data-popper-placement^='right'] {
        .arrow {
            left: -8px;
        }
    }
    .arrow,
    .arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        background: inherit;
    }
    .arrow {
        visibility: hidden;
        position: absolute;
    }
    .arrow::before {
        visibility: visible;
        content: "";
        transform: rotate(45deg);
    }

    .tooltip {
        background: #333;
        color: white;
        font-weight: bold;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
    }
</style>